import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Checkbox, Pagination, message } from 'antd'
import { PlusSquareOutlined, MinusSquareOutlined } from "@ant-design/icons"
import request from '@/utils/request'
import styles from "./selector.less"

const TableRow = (props: any) => {
  const { toggleShow, idList, val, checkboxChange } = props
  let subCheckLen = val.sku_list.filter((v: any) => v.checked === true).length;

  const goodsIds = idList.map((v: any) => v.goods_id)
  const skuIds = idList.map((v: any) => v.sku_id)
  return (
    <>
      <tr >
        <td className={goodsIds.includes(val.id) ? styles.goodsIn : ""} style={{ width: "60px", textAlign: "center" }}>
          <div style={{ display: "flex" }}>
            <Checkbox onChange={(e: any) => { checkboxChange(e.target.checked, val.id) }} checked={val.checked}
              indeterminate={subCheckLen > 0 && val.sku_list.length !== subCheckLen && val.checked} />
          </div>
        </td>
        <td>
          {val.show ? <MinusSquareOutlined onClick={() => {
            toggleShow(val.id, false)
          }} /> : <PlusSquareOutlined onClick={() => {
            toggleShow(val.id, true)
          }} />}
          <img src={val.goods_logo} alt="" style={{ width: "60px", height: "60px" }} />
          <span>{val.goods_title}</span>

        </td>
        <td style={{ width: "120px", textAlign: "center" }}>￥{val.goods_price}</td>
        <td style={{ width: "120px", textAlign: "center" }}>{val.total_stock}</td>
        <td style={{ width: "160px", textAlign: "center" }}>虚拟商品</td>
      </tr>
      <tr className={styles.detailRow} style={val.show ? {} : { display: "none" }}>
        <td colSpan={5}>
          {
            val.sku_list.length > 0 ?
              <ul>
                {
                  val.sku_list.map((item: any, inx: number) => {
                    return <li key={inx}>
                      <div className={`${styles.detailBox} ${skuIds.includes(item.id) ? styles.goodsIn : ""}`}>

                        <img src={item.sku_logo} alt="" style={{ height: "72px", width: "72px" }} />

                        <div className={styles.rightTitle}>
                          <span>{item.sku_title}</span>
                          <span>价格：￥{item.sale_price}</span>
                          <span><span>库存：</span>{item.stock}</span>
                        </div>

                      </div>
                    </li>
                  })
                }
              </ul> :
              <div style={{ padding: "5px 0", color: "#ff8143" }}>暂无sku</div>
          }
        </td>
      </tr>
    </>
  );
};



const selector = (props: any) => {

  const { idList, close, selectFinish } = props
  const [tableData, setTableData] = useState({
    list: [], total: 0
  });
  const [current, setCurrent] = useState(1);
  const [form] = Form.useForm()

  const getList = (params: any = {}) => {
    request(`/promote/sec-kill/goods-scope-list`, {
      params: { pageSize: 10, current, status, ...params },
    }).then((result) => {
      const { list, total } = result.data
      const dataList = list.map((item: any) => {

        return { ...item, checked: false, show: false };
      })
      setTableData({ list: dataList, total });
    });
  };

  useEffect(() => {
    getList();
  }, []);


  const toggleShow = (id: number, show: boolean) => {

    const list: any = tableData.list.map((val: any) => {
      return val.id == id ? { ...val, show } : val
    })
    setTableData({ ...tableData, list })

  }

  const checkboxChange = (checked: boolean, goodsId: number) => {
    const list: any = tableData.list.map((item: any) => {
      return item.id === goodsId ?
        { ...item, checked } :
        { ...item, checked: false }
    });
    setTableData({ ...tableData, list })
  }

  const onFinish = (values: any) => {
    getList()
  }

  const confirm = () => {
    let goodsList = tableData.list.filter((item: any) => item.checked)
    if (goodsList.length < 1) {
      message.warning("请选择一件商品")
      return
    }
    const selected = goodsList.pop();
    selectFinish(selected)
    close()
  }

  return (
    <>
      <div style={{ display: "flex", justifyContent: "flex-end" }}>
        <Form
          layout="inline"
          style={{ float: 'right', marginBottom: '8px' }}
          onFinish={onFinish}
          form={form}
        >
          <Form.Item name="goods_name">
            <Input placeholder="请输入商品名称" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">搜索</Button>
          </Form.Item>
        </Form>
      </div>

      <table className={styles.headTable}>
        <thead>
          <tr>
            <th style={{ width: "60px", textAlign: "center" }}></th>
            <th>商品</th>
            <th style={{ width: "120px", textAlign: "center" }}>价格</th>
            <th style={{ width: "120px", textAlign: "center" }}>库存</th>
            <th style={{ width: "160px", textAlign: "center" }}>商品类型</th>
          </tr>
        </thead>
      </table>
      <div className={styles.contentList} style={{ height: "500px", overflowY: "auto" }}>
        <table className={styles.myTable}>
          <tbody>
            {tableData.list.map((val, inx) => <TableRow key={inx} val={val} toggleShow={toggleShow} checkboxChange={checkboxChange} idList={idList} />)}
          </tbody>
        </table>
      </div>
      <div style={{ paddingTop: "10px", display: "flex", justifyContent: "space-between" }}>
        {
          tableData.list.length !== 0 && <div> <Pagination defaultPageSize={10} current={current} total={tableData.total} onChange={(page, pageSize) => {
            setCurrent(page)
            form.submit()
          }} /></div>
        }
        <div>
          <Button style={{ marginRight: "8px" }} onClick={close}>取消</Button>
          <Button type="primary" onClick={confirm}>确认</Button>
        </div>
      </div>
    </>
  );
};

export default selector;
